<template>
  <Dialog class="record-dialog" v-model="dialogVisible" title="问卷填写记录" width="70%">
    <el-scrollbar max-height="500px">
      <el-table v-loading="loading" :data="columnData" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column align="center" label="编号" prop="id" />
        <template v-for="item in tableColumns" :key="item.key">
          <el-table-column
            align="center"
            :formatter="item.key === 'createdTime' ? dateFormatter : undefined"
            :label="item.label"
            :prop="item.key"
          />
        </template>
      </el-table>
    </el-scrollbar>
    <template #footer>
      <div class="flow-root m--15px mr-15px">
        <!-- 分页 -->
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { QuestionnaireRecordApi, QuestionnaireRecordVO } from '@/api/school/questionnaire/record'
import { dateFormatter } from '@/utils/formatTime'
const dialogVisible = ref(false)
const loading = ref(false)
const list = ref<QuestionnaireRecordVO[]>([])
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  qsId: 0
})
const tableColumns: any = ref([])
const columnData: any = ref([])
const formatTableData = (listData: any[]) => {
  tableColumns.value = []
  columnData.value = []
  listData.forEach((item: any) => {
    const tableData: any = JSON.parse(item.dataJson)
    if (!tableColumns.value.length) {
      tableColumns.value = tableData.labelList
    }
    columnData.value.push({ ...tableData.data, id: item.id })
  })
}
/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await QuestionnaireRecordApi.getQuestionnaireRecordPage(queryParams)
    list.value = data.list
    total.value = data.total
    formatTableData(list.value)
  } finally {
    loading.value = false
  }
}
const open = (id: number) => {
  queryParams.qsId = id
  dialogVisible.value = true
  getList()
}
defineExpose({
  open
})
</script>
<style lang="scss" scoped>
:deep() {
  .record-dialog {
    .el-dialog__footer,
    .el-dialog__body {
      display: flow-root;
    }
  }
}
</style>
